<template>
  <div id="wantNumber">
    <index v-if="!flow&&!errorPage"/>
    <flow v-if="flow&&!errorPage"/>
    <unfond v-if="errorPage"></unfond>
  </div>
</template>

<script>
import index from "./index/index.vue"
import flow from "./flow/index.vue"
import store from "../store.js"
import unfond from "./index/unfond.vue"
import axios from "axios"
export default {
  name: "wantNumber",
  components: {
    index,
    flow,
    unfond
  },
  data () {
    return {
      errorPage: false
    }
  },
  computed: {
    serveAPI: {
      get () {
        let serve = {};
        let portAddress = store.state.apiPort.map(
          e => store.state.apiOrigin + e.split(":")[1]
        );
        let portName = store.state.apiPort.map(e => e.split(":")[0]);
        for (let i = 0; i < portName.length; i++) {
          serve[portName[i]] = portAddress[i];
        }
        return serve;
      },
      set () { }
    },
    flow: {
      get () {
        return store.state.flow
      },
      set () { }
    }
  },
  methods: {
    verityPage () {
      let href = location.href.split('/')
      let code = href[href.length - 1].split('?')[0]
      // console.log(code)
      if (!code) {
        store.commit("upload", { prope: "loaded", data: true });
        this.errorPage = true
      }
      else {
        axios.get(this.serveAPI.verityPage + code).then(res => {
          console.log(res)
          if (res.data.error) {
            console.log(res.data.error)
            this.errorPage = true
          } else {
            store.commit("upload", { prope: "uid", data: code });
          }
        })
      }
    }
  },
  created () {
    this.verityPage()
  }
};
</script>
<style lang="stylus">
#wantNumber {
  height 100vh
  width 100vw
  max-width 420px
  min-width 320px
  min-height 550px
  max-height 820px
  position relative
  // box-shadow 0 1px 3px rgba(26, 26, 26, 0.1)
  // @media only screen and (min-width: 420px) {
  // position absolute
  // left 50%
  // top 50%
  // transform translateX(-50%) translateY(-50%)
  // border-radius 3px
  // overflow hidden
  // }
}
</style>

